<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>所有用户</title>
    <link rel="stylesheet" href="__TPL__/frame/layui/css/layui.css">
    <!--<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">-->
    <link rel="stylesheet" href="__TPL__/frame/static/css/style.css">
    <link rel="icon" href="__TPL__/frame/static/image/code.png">
    <style>
        .layui-form-switch {
            position: relative;
            height: 24px;
            line-height: 24px;
            width: 56px;
            padding: 0 5px;
            margin-top: 8px;
        }
    </style>
</head>
<body class="body">

<!-- 工具集 -->
<div class="my-btn-box">
    <span class="fl">
        <a class="layui-btn btn-add btn-default" id="btn-add">添加</a>
        <a class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">&#xe9aa</i></a>
    </span>
    <span class="fr">
        <span class="layui-form-label">搜索条件：</span>
        <div class="layui-input-inline">
            <input id="search" type="text" autocomplete="off" placeholder="用户昵称" class="layui-input">
        </div>
        <button class="layui-btn mgl-20" id="search-btn">查询</button>
    </span>
</div>

<!-- 表格 -->
<div id="dataTable" lay-filter="dataTable"></div>
<script type="text/javascript" src="__TPL__/frame/layui/layui.js"></script>
<script type="text/javascript" src="__TPL__/js/index.js"></script>
<!-- 表格操作按钮集 -->
<script type="text/html" id="switch_status">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="开启|关闭"
           lay-filter="change_status" {{ d.status== 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="barOption">
    <a class="layui-btn layui-btn-small layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-small layui-btn-danger" lay-event="editAuth">权限设置</a>
</script>
<script type="text/javascript">

    // layui方法
    layui.use(['table', 'form', 'layer', 'vip_table'], function () {

        // 操作对象
        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , vipTable = layui.vip_table
            , $ = layui.jquery;
        // 表格渲染
        var dataTable = table.render({
            elem: '#dataTable'
            , size: 'lg'
            , cellMinWidth: 80//指定原始表格元素选择器（推荐id选择器）
            , height: vipTable.getFullHeight()    //容器高度
            , cols: [[                  //标题栏
                {field: 'id', title: 'ID', width: 80},
                {field: 'name', title: '用户组', width: 180}
                , {field: 'describe', title: '描述', width: 520}
                , {field: 'create_time', title: '创建时间', width: 180}
                , {field: 'status', title: '状态', width: 90, templet: '#switch_status'}
                , {fixed: 'right', title: '操作', width: 180, align: 'center', toolbar: '#barOption'} //这里的toolbar值是模板元素的选择器
            ]]
            , id: 'dataCheck'
            , url: '{:url("Api/ajaxAllGroup")}'
            , method: 'post'
            , event: true
            , page: true
            , limits: [30, 60, 90, 150, 300]
            , limit: 30 //默认采用30
            , loading: true
        });

        // 刷新
        $('#btn-refresh').on('click', function () {
            location.reload();
        });
        //查询
        $('#search-btn').click(function () {
            dataTable.reload({where:{search:$('#search').val()}});
        });
        //监听状态操作
        form.on('switch(change_status)', function (obj) {

            var id = this.value;
            var status = obj.elem.checked;
            // 获取当前控件
            var selectIfKey = obj.othis;
            //获取当前所在行
            var parentTr = selectIfKey.parents("tr");
            layer.open({
                content: '是否修改当前用户组状态?'
                , yes: function (index, layero) {
                    $.ajax({
                        url: '{:url("Auth/groupStatusChange")}',
                        data: {id: id, status: status ? 1 : 0},
                        dataType: 'json',
                        type: 'post',
                        success: function (data) {
                            if (data.code == 1) {
                                layer.msg(data.msg, {icon: 1, time: 2000})
                            } else {
                                layer.msg(data.msg, {icon: 1, time: 2000})
                            }
                            layer.close(index);
                        }
                    })
                }
                , cancel: function () {
                    if (!status) {
                        parentTr.find("td:eq(4)").find("div:eq(1)").prop("class", "layui-select layui-form-onswitch layui-form-switch");
                        parentTr.find("td:eq(4)").find("div:eq(1)").find('em').text('开启');
                        obj.elem.checked = true;
                    } else {
                        parentTr.find("td:eq(4)").find("div:eq(1)").prop("class", "layui-unselect layui-form-switch");
                        parentTr.find("td:eq(4)").find("div:eq(1)").find('em').text('关闭');
                        obj.elem.checked = false;
                    }
                }
            });

        });
        //监听工具条
        table.on('tool(dataTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: '用户组信息',
                    content: '{:url("Auth/showEditGroup")}?id=' + data.id,
                    area: ['400px', '500px'],
                    maxmin: true,
                    end: function () {
                        dataTable.reload();
                    }
                })
            }
            if(obj.event === 'editAuth'){
                layer.open({
                    type: 2,
                    title: '用户组权限',
                    content: '{:url("Auth/showEditGroupAuth")}?id=' + data.id,
                    area: ['800px', '550px'],
                    maxmin: true,
                    end: function () {
                        dataTable.reload();
                    }
                })
            }
            return false;
        });

        $('#btn-add').click(function () {
            layer.open({
                type: 2,
                title: '新增用户组',
                content: '{:url("Auth/showAddGroup")}',
                area: ['500px', '400px'],
                maxmin: true,
                end: function () {
                    dataTable.reload();
                }
            })
        })
    });

</script>

</body>
</html>